<template>
  <svg-icon
    :icon-name="
      isFullscreen
        ? 'ant-design:fullscreen-exit-outlined'
        : 'ant-design:fullscreen-outlined'
    "
    @click="handleClick"
    size-1.5em
  />
</template>

<script setup lang="ts">
import screenfull from "screenfull"
const isFullscreen = ref(false)
const { proxy } = getCurrentInstance()!

const handleClick = () => {
  if (screenfull.isEnabled) {
    screenfull.toggle()
  } else {
    proxy?.$message({
      message: "Your browser cannot enter fullscreen mode.",
      type: "warning"
    })
  }
}

// 更新当前全屏状态
const updateFullscreenStatus = () => {
  isFullscreen.value = screenfull.isFullscreen
}

// 监听全屏状态变化
const onFullscreenChange = () => {
  updateFullscreenStatus()
}

onMounted(() => {
  if (screenfull.isEnabled) {
    screenfull.on("change", onFullscreenChange)
    updateFullscreenStatus() // 初始化全屏状态
  }
})

onUnmounted(() => {
  if (screenfull.isEnabled) {
    screenfull.off("change", onFullscreenChange)
  }
})
</script>

<style scoped></style>
